<template>
  <div class="page-search">
    <div class="search">
      <my-form v-bind="searchFormConfig" v-model="formData">
        <template #header>
          <h2>高级检索</h2>
        </template>
        <template #footer>
          <div class="handle-btns">
            <el-button @click="handleResetClick">重置</el-button>
            <el-button type="primary" @click="handleQueryClick">搜索</el-button>
          </div>
        </template>
      </my-form>
    </div>
  </div>
</template>

<script>
import MyForm from "@/base-ui/form";
import { ref } from "vue";
export default {
  props: {
    searchFormConfig: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    MyForm,
  },
  emits: ["resetBtnClick", "searchBtnClick"],
  setup(props, { emit }) {
    const formItems = props.searchFormConfig.formItems ?? [];

    const formOrginData = {};
    for (const item of formItems) {
      formOrginData[`${item.field}`] = "";
    }

    const formData = ref(formOrginData);

    const handleResetClick = () => {
      for (const key in formOrginData) {
        formData.value[`${key}`] = formOrginData[`${key}`];
      }
      emit("resetBtnClick");
    };
    const handleQueryClick = () => {
      emit("searchBtnClick", formData.value);
    };
    return {
      formData,
      handleResetClick,
      handleQueryClick,
    };
  },
};
</script>

<style lang="less" scoped>
.page-search {
  //border-radius: 20px;
}
.search {
  overflow: hidden;
  padding-bottom: 20px;
  h2 {
    text-align: center;
  }
  .handle-btns {
    display: flex;
    justify-content: center;
  }
}
</style>
